<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021-03-06
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>查询基本药物信息</title>
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
</head>
<body>
<div class="layui-container">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <div class="layui-colla-title">查询条件</div>
            <div class="layui-colla-content layui-show">
                <form class="layui-form layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="drugname" placeholder="根据药品名称进行查询">
                    </div>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="chaxun" onclick="search()">查询</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/html" id="toolbar">
        <button type="button" class="layui-btn" id="pishan" onclick="delAll()">删除选中行数据</button>
        <button type="button" class="layui-btn" id="tjin" onclick="add()">增加用户</button>
    </script>
    <table id="infoTb" lay-filter="infoTb"></table>

    <%--修改和删除 id=active--%>
    <script type="text/html" id="active">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0px">
<%--                    <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">--%>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">修改</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" style="" lay-event="del" >删除</button>
                </div>
            </div>
        </form>
    </script>
<%--    添加功能--%>
    <div id="addmk" style="display: none">
        <form class="layui-form" lay-filter="addform" action="" style="padding: 50px" id="addDruginfo">
            <div class="layui-form-item">
                <label class="layui-form-label">药品名称:</label>
                <div class="layui-input-block">
                    <input id="a1" type="text" name="drugname" required  lay-verify="required" placeholder="请输入药品名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">厂商:</label>
                <div class="layui-input-block">
                    <input id="a2" type="text" name="changshang" required  lay-verify="required" placeholder="请输入厂商" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-block">
                    <input id="a3" type="text" name="beizhu" required  lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">药品位置:</label>
                <div class="layui-input-block">
                    <input id="a4" type="text" name="location" required  lay-verify="required" placeholder="请输入药品位置" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单位:</label>
                <div class="layui-input-block">
                    <input id="a5" type="text" name="unit" required  lay-verify="required" placeholder="请输入单位" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">规格:</label>
                <div class="layui-input-block">
                    <input id="a6" type="text" name="guige" required  lay-verify="required" placeholder="请输入规格" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">条形码:</label>
                <div class="layui-input-block">
                    <input id="a7" type="text" name="tiaoxingma" required  lay-verify="required" placeholder="请输入条形码" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>

<%--    修改功能--%>
    <div id="update" style="display: none">
        <form class="layui-form" lay-filter="updateForm"  style="padding: 50px" id="updateForm">
            <input  type="hidden" name="id" required  lay-verify="required" placeholder="隐藏id" autocomplete="off" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">药品名称:</label>
                <div class="layui-input-block">
                    <input  type="text" name="drugname" required  lay-verify="required" placeholder="请输入药品名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">厂商:</label>
                <div class="layui-input-block">
                    <input  type="text" name="changshang" required  lay-verify="required" placeholder="请输入厂商" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-block">
                    <input  type="text" name="beizhu" required  lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">药品位置:</label>
                <div class="layui-input-block">
                    <input  type="text" name="location" required  lay-verify="required" placeholder="请输入药品位置" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单位:</label>
                <div class="layui-input-block">
                    <input  type="text" name="unit" required  lay-verify="required" placeholder="请输入单位" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">规格:</label>
                <div class="layui-input-block">
                    <input  type="text" name="guige" required  lay-verify="required" placeholder="请输入规格" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">条形码:</label>
                <div class="layui-input-block">
                    <input  type="text" name="tiaoxingma" required  lay-verify="required" placeholder="请输入条形码" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>

</div>

<script src="webjars/layui/2.5.5/layui.js"></script>
<script type="text/javascript">
        layui.use(["jquery","element","table","layer","form"],function () {
            let $=layui.jquery;
            let table=layui.table;
            let table1=layui.table;
            let layer=layui.layer;
                table.render({
                    id:'infoTb'
                    ,elem: '#infoTb'
                    ,url: '/druginfo/search' //数据接口
                    ,toolbar:"#toolbar"
                    ,cols: [[ //表头\
                        {field: 'id', type: 'checkbox'}
                        ,{field: 'drugname', title: '药名',}
                        ,{field: 'changshang', title: '厂商',  sort: true}
                        ,{field: 'beizhu', title: '备注', }
                        ,{field: 'location', title: '药品位置', }
                        ,{field: 'unit', title: '单位', sort: true}
                        ,{field: 'guige', title: '规格',  sort: true}
                        ,{field: 'tiaoxingma', title: '条形码',}
                        ,{title: '操作',templet:"#active"}
                    ]],
                    page:true
                });
            table1.on("tool(infoTb)",function ({data,event}) {
                    switch (event) {
                        case "update":
                            // alert("修改")
                            update(data)
                            break;
                        case "del":
                            // alert("删除")
                            del(data.id)
                            break;
                    }
                })
            })

        //修改功能
        function update(data) {
            // console.log("我进到修改里了")
            // console.log(data)
            layui.use(["jquery","table","layer"],function () {
                let table=layui.table;
                let layer=layui.layer;
                let $=layui.jquery;

                layui.form.val("updateForm",data);
                // alert("过了")

                layer.open({
                    type:1,
                    content:$('#update'),
                    area:["500px","580px"],
                    btn:["确定","取消"],
                    title:"修改药品基础信息",
                    yes(){
                        let parms=  layui.form.val("updateForm")
                        $.post("/druginfo/updareDruginfo",parms)
                            .done(({msg})=>{
                                // layer.msg(msg)
                                // console.log(msg);
                                layer.close(layer.index);
                                table.reload("infoTb")
                            });
                    },
                });
            })

        }
        //删除功能
        function del(c) {
            // console.log("我进到删除里了")
            // console.log(c)
            layui.use(["jquery","layer","table"],function () {
                let $=layui.jquery;
                let table=layui.table;
                let layer=layui.layer;
                layer.confirm('确认删除么？', {
                    time: 20000, //20s后自动关闭
                    btn: ['确定', '取消'],
                    yes(){
                        $.post("/druginfo/deleteDruginfo",{id:c}).done(({msg}) => {
                            // console.log(msg);
                            layer.msg(msg);
                            table.reload("infoTb")
                        });
                    }
                });



            })
        }

        function delAll() {
            var data;
            var id=new Array();
            layui.use(["jquery","layer","table"],function () {
                let $=layui.jquery;
                let table=layui.table;
                let layer=layui.layer;
                //声明复选框
                datas =table.checkStatus("infoTb").data;
                // alert(datas)
                for(var i in datas) {
                    id[i] = datas[i].id;//得到复选框的值
                    // alert(id[i])
                }
                // alert(id)
                // 确认删除
                layer.confirm('确认删除选中的数据么？', {
                    time: 20000, //20s后自动关闭
                    btn: ['确定', '取消'],
                    yes(){
                        //选中行的所有内容
                        $.ajax({
                            url:"/druginfo/deleteAllDruginfos",
                            type:"post",
                            data:JSON.stringify(id),
                            contentType:"application/json"
                        })
                            .done(function(result){
                                layui.layer.msg(result.msg);
                                layui.table.reload("infoTb");
                            });
                    }
                });
            })
        }

        //增加功能
        function add() {
            layui.use(["jquery","table","layer"],function () {
                let $=layui.jquery;
                let table=layui.table;
                let layer=layui.layer;
                $("#addDruginfo")[0].reset();
                layer.open({
                    type:1,
                    content:$('#addmk'),
                    area:["500px","580px"],
                    btn:["确定","取消"],
                    title:"添加药品基础信息",
                    yes(){
                        let parms=  layui.form.val("addform")
                        $.post("/druginfo/addDruginfo",parms)
                            .done(({msg})=>{
                                // layer.msg(msg)
                                console.log(msg);
                                layer.close(layer.index);
                                table.reload("infoTb")
                            });
                    },
                });
            });
        }
        //查询
        function search() {
            layui.use(["jquery","table"],function () {
                let $=layui.jquery;
                let table=layui.table;
                let nrr= $("#drugname").val();
                let drugname=nrr;
                let where ={drugname,page:1};
                alert(drugname)
                table.reload("infoTb",{where})
            })
        }

</script>
</body>
</html>
